<template>
  <div class="line-container">
    <el-tabs v-model="activeIndex" class="demo-tabs">
      <el-tab-pane v-for="item in list" :label="item.label" :key="item.value" :name="item.value">
        <!-- <line-chart class="chart-common" v-if="activeIndex === 0"></line-chart> -->
        <line-chart-high-light
          class="chart-common"
          v-if="activeIndex === 1"
        ></line-chart-high-light>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
// import lineChart from '@/components/sciChartComponents/lineChart/lineChart.vue';
import lineChartHighLight from '@/components/sciChartComponents/lineChart/highLight.vue';

const activeIndex = ref(0);

const list = [
  {
    label: '折线图',
    value: 0,
  },
  {
    label: '高亮折线图',
    value: 1,
  },
];

const options = reactive({
  lineColor: 'steelblue',
  lineThickness: 3,
  pointMarkerColor: '#fff',
  xAxisTitle: 'X Axis',
  yAxisTitle: 'Y Axis',
})
</script>

<style scoped lang="scss">
:deep(.el-tabs__item) {
  font-size: 18px !important;
}
.chart-common {
  width: 100%;
  height: calc(100vh - 180px);
}
</style>
